<template>
  <div class="yingmoo-column">
    <div class="column-navbar">
      <h1 class="column-title">
        <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
        <span class="column-name">全部媒体分类</span>
        <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
      </h1>
      <ul class="media-nav-tab">
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaDowntown'}" to="/ymMediaDowntown"><span @click="curr=1,setcurr(1)" :style='{"padding":"7px 93px"}'>市区媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymHighspeed'}" to="/ymHighspeed"><span @click="curr=2,setcurr(2)" :style='{"padding":"7px 93px"}'>高速媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaPublic'}" to="/ymMediaPublic"><span @click="curr=3,setcurr(3)" :style='{"padding":"7px 93px"}'>公交媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMetro'}" to="/ymMetro"><span @click="curr=4,setcurr(4)" :style='{"padding":"7px 93px"}'>地铁媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymAirport'}" to="/ymAirport"><span @click="curr=5,setcurr(5)" :style='{"padding":"7px 93px"}'>机场媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMediaTrain'}" to="/ymMediaTrain"><span @click="curr=6,setcurr(6)" :style='{"padding":"7px 93px"}'>火车媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymPassenger'}" to="/ymPassenger"><span @click="curr=7,setcurr(7)" :style='{"padding":"7px 85px"}'>客运站媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymBuilding'}" to="/ymBuilding"><span @click="curr=8,setcurr(8)" :style='{"padding":"7px 93px"}'>楼宇媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymSuper'}" to="/ymSuper"><span @click="curr=9,setcurr(9)" :style='{"padding":"7px 93px"}'>商超媒体</span></router-link>
        <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymFeature'}" to="/ymFeature"><span @click="curr=10,setcurr(10)" :style='{"padding":"7px 77px"}'>特色区域媒体</span></router-link>
      </ul>
    <ul class="column-subtitle clearfix">
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/">
        <li :style='{"background-color":currIndex==1? "#0f93f2" :""}' @click="currIndex=1,setcurrIndex(1)">首页</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='/ymStore'}" to="/ymStore">
        <li :style='{"background-color":currIndex==2? "#0f93f2" :""}' @click="currIndex=2,setcurrIndex(2)">商城</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymCase'}" to="/ymCase">
        <li :style='{"background-color":currIndex==3? "#0f93f2" :""}' @click="currIndex=3,setcurrIndex(3)">案例展示</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymNews'}" to="/ymNews">
        <li :style='{"background-color":currIndex==4? "#0f93f2" :""}' @click="currIndex=4,setcurrIndex(4)">新闻</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymStore'}" to="/ymStore">
        <li :style='{"background-color":currIndex==5? "#0f93f2" :""}' @click="currIndex=5,setcurrIndex(5)">国际媒体</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
        <li :style='{"background-color":currIndex==6? "#0f93f2" :""}' @click="currIndex=6,setcurrIndex(6)">鹰监测</li>
      </router-link>
      <router-link tag="li" :class="{'router-link-exact-active': $route.name=='ymMember'}" to="/ymMember">
        <li :style='{"background-color":currIndex==7? "#0f93f2" :""}' @click="currIndex=7,setcurrIndex(7)">会员中心</li>
      </router-link>
    </ul>
    </div>
    <div class="column-content clearfix">
      <div class="media-nav-carousel">
        <el-carousel indicator-position="inside">
          <el-carousel-item v-for="(v,i) in banners" :key="i">
            <img :src="v.imgpath"/>
          </el-carousel-item>
        </el-carousel>
        <div class="media-nav-carousel-shade">
          <div class="shade"><p>投放广告</p>在线采购，价格超低、广告投放一站式全免费</div>
          <router-link tag="div" class="shade" :class="{'router-link-exact-active': $route.name=='ymExpert'}" to="/ymExpert">
            <p>专家服务</p>顶级专家 在线答疑，免费 提供策划、创意、设计服务
          </router-link>
          <div class="shade"><p>媒体询价</p>鹰目专家为您 快速 提供指定媒体的精准信息和 报价</div>
        </div>
        
      </div>
      <div class="yingmoo-register">
        <p class="register">会员登录</p>
        <div>
          <input type="text" class="register-name" v-show="show" v-model="userName" placeholder="请输入用户名" />
          <input type="text" class="register-name" v-show="!show" readonly="readonly" v-model="userName" placeholder="请输入用户名" />
        </div>
        <div>
          <input type="password" class="register-password" v-show="show" v-model="pwd" placeholder="请输入密码" />
          <input type="password" class="register-password" v-show="!show" readonly="readonly" v-model="pwd" placeholder="请输入密码" />
        </div>
        <button class="btn-register" v-show="show" @click="login">登录</button>
        <button class="btn-register" v-show="!show" @click="exit">退出</button>
        <router-link tag="button" class="btn-login" to="/ymEnroll">注册</router-link>
        <img src="../assets/nav/QR_code.png" class="QR-code" />
        <p class="yingmoo-registertext">全程服务无忧保障</p>
        <p class="advantage">
          <span class="span"><img src="../assets/nav/aq.png" /></span>
          <span class="span">价格透明</span>
          <span class="span span2"><img src="../assets/nav/jg.png" /> </span>
          <span class="span">安全保障</span>
        </p>
        <p class="advantage">
          <span class="span"><img src="../assets/nav/zs.png" /></span>
          <span class="span">准时保质</span>
          <span class="span span2"><img src="../assets/nav/js.png" /></span>
          <span class="span">极速退款</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ym-banner',
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        /* banner数据，方便修改 */
        currIndex: -1,
        curr: 0,
        user:{},
        show:false,
        userName:'',
        pwd:'',
        banners: [{
          imgUrl: require('@/assets/ym-banner/banner1.png')
        }, {
          imgUrl: require('@/assets/ym-banner/banner1.png')
        }, {
          imgUrl: require('@/assets/ym-banner/banner1.png')
        }]
      }
    },
    mounted() {
      this.getList(22, 5);
      this.getList(23, 3);
      this.getcurrIndex()
      this.getcurr()
      this.getUser()
    },
    methods: {
    	getUser(){
    		this.user = JSON.parse(localStorage.getItem("user"));
    		if(this.user!=null){
    			this.show = false
    		}else{
    			this.show = true
    		}
    	},
      getList: function(adid, limit) {
        this.$http({
          url: this.requestAddr+'/GetJson/get/adshow?adid=' + adid + "&limit=" + limit,
          method: 'JSONP',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          jsonp: 'callbackparam'
        }).then(res => {
          if (res.data != null) {
            if (adid == 22) {
              this.banners = res.data;
            }
            if (adid == 23) {
              this.list = res.data;
            }
          }
        }).catch()
      },
      setcurr:function(ear){
        window.sessionStorage.setItem('ear',ear)
          window.sessionStorage.removeItem('index')
      },
      getcurr:function(){
        this.curr= window.sessionStorage.getItem('ear')
      },
      setcurrIndex:function(index){
        if(index==7){
          window.sessionStorage.removeItem('index')
         }else{
           window.sessionStorage.setItem('index', index)
         }
      },
      getcurrIndex:function(){
        this.currIndex = window.sessionStorage.getItem('index')
      },
      login:function(){
      	if(this.user!=null){
	      	alert("您已经登录")
	      	return
      	}
      	console.log(this.userName);
      	console.log(this.pwd);
      	this.user = {
      		name : this.userName,
      		pwd : this.pwd
      	}
      	this.$http.post(this.requestAddr+"/Login/tologin",this.user,{emulateJSON: true}).then(
          (res)=>{
          	localStorage.setItem('user',JSON.stringify(res.data.user));
          	localStorage.setItem('level',JSON.stringify(res.data.level));
            if(res.data.code == 0){
            	window.location.reload()
            }
          },
          (error)=>{
            console.log(error);
          }
    		);
      },
      exit(){
      	this.$confirm('确认退出登录吗？', '确认退出', {
		      confirmButtonText: '确定',
		      cancelButtonText: '取消',
		      type: 'warning' 
        }).then(
        	()=>{
	        	localStorage.setItem("user",null)
						this.user = null
						window.location.reload()
        	}
        )
      }
    }

  }

</script>

<style scoped lang="less">
  .column-content {
    height: 340px;
    background-color: transparent;
  }

  .column-title {
    height: 44px;
    &:hover {
      cursor: default;
    }
  }

  .media-nav-tab {
    float: left;
    width: 247px;
    height: 384px;
    background-image: url(../assets/ym-index/bg-left1.png);
    background-position: bottom;
    position: relative;
    li:nth-child(1) {
      padding-top: 44px;

    }
    li {
      color: white;
      text-align: center;
      line-height: 34px;
      font-size: 15px;
      &:hover {
        color: #f29600;
        background-color: #c7e8fa;
        cursor: pointer;
      }
    }
  }

  .column-subtitle {
    height: 44px;
    &:hover {
      cursor: pointer;
    }
  }

  .media-nav-carousel {
    float: left;
    width: 768px;
    height: 100%;
    position: relative;
    .media-nav-carousel-shade {
      z-index: 11;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 75px;
      display: flex;
      cursor: pointer;
      .shade {
        flex: 1;
        margin: 0 1px;
        text-align: center;
        background-color: rgba(245, 245, 245, 0.7);
        color: #333333;
        line-height: 20px;
        font-size: 14px;
        padding: 0 36px;
        p {
          color: #1976bd;
          font-size: 16px;
          font-weight: bold;
          padding-top: 10px;
        }
        &:hover {
          background-color: rgba(242, 150, 0, 0.7);
          color: white;
          p {
            color: white;
          }
        }
      }
    }
  }

  .yingmoo-register {
    float: right;
    width: 175px;
    height: 333px;
    margin-top: 7px;
    background-color: white;
    .register {
      background-color: #f29600;
      font-size: 15px;
      color: white;
      line-height: 34px;
      text-align: center;
    }
    div {
      input {
        width: 143px;
        height: 23px;
        margin-left: 10px;
        margin-top: 5px;
        background-color: white;
        border: 1px solid #808080;
      }
    }
    button {
      width: 67px;
      height: 25px;
      font-size: 12px;
      color: white;
      border: none;
      background-color: #808080;
      margin-top: 5px;

    }
    button:hover {
      background-color: #3fa9f5;
    }
    .btn-register {
      margin-left: 10px;
    }
    .btn-login {
      margin-left: 8px;
    }
    .QR-code {
      margin-left: 28px;
      margin-top: 20px;
    }
    .yingmoo-registertext {
      font-size: 10px;
      text-align: center;
      margin-top: 8px;
      color: #f29600;
    }
    .advantage {
      text-align: center;
      margin-top: 3px;
      .span {
        font-size: 8px;
        margin-top: 5px;
      }
      .span2 {
        padding-left: 10px;
      }
    }
  }

</style>
